<template>
  <div>
    <el-dialog width="1200px" top="5vh" :title="$t('m.sigin.skuDetail')" :visible.sync="popupVisible" :before-close="close">
      <div class="sku-body-wrap">
        <div class="left-side">
          <!-- 产品ICON start -->
          <div class="productIcon-list">
            <el-image class="icon-pic-wrap" v-for="(item,index) in detail.iconDtoList" :src="`${filePath}${item.iconimage}`" :key="index">
              <div slot="error" class="image-slot">
                <img src="@/assets/defalut.png" alt />
              </div>
            </el-image>
          </div>
          <!-- 产品ICON end -->

          <!-- remark list start -->
          <p class="remark-item" v-for="(item,index) in remarkList" :key="index">{{item}}</p>
          <!-- remark list end -->
        </div>
        <div class="right-side">
          <!-- 轮播图 start -->
          <el-carousel height="700px" :autoplay="false">
            <el-carousel-item v-for="(item,index) in detail.quantitypicture" :key="index">
              <el-image class="main-pic-wrap" :src="`${filePath}${item.FilePath}`" @click="showViewer(index)">
                <div slot="error" class="image-slot">
                  <img src="@/assets/defalut.png" alt />
                </div>
              </el-image>
            </el-carousel-item>
          </el-carousel>
          <!-- 轮播图 end -->
        </div>
      </div>

      <el-image-viewer v-if="viewerVisible" :on-close="closeViewer" :url-list="previewList"/>

    </el-dialog>
  </div>
</template>
<script>
export default {
  name:'sku-picture',
  props:{
    popupVisible:{
      type:Boolean,
      default:false
    },
    detail:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    return {
      filePath:window._config_.filepath, // 图片域名
      previewList:[], // 预览图
      remarkList:[], // remark数组

      viewerVisible:false // 控制图片预览显示隐藏
    }
  },
  mounted(){
    for(let key in this.detail){
      if(key.includes('remark')) this.remarkList.push(this.detail[key])
    }
  },
  components:{
    ElImageViewer:() => import('element-ui/packages/image/src/image-viewer')
  },
  methods:{
    close(){
      this.$emit('close')
    },
    // 开启图片预览
    showViewer(index){
      this.previewList = []
      // 图片重新排序
      for(let i=0;i<this.detail.quantitypicture.length;i++){
        let file = `${this.filePath}${this.detail.quantitypicture[(index+i)%this.detail.quantitypicture.length].FilePath}`
        this.previewList.push(file)
      }
      this.viewerVisible = true
    },
    closeViewer(){
      this.viewerVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.sku-body-wrap{
  display: flex;
  .left-side{flex-grow: 1;}
  .right-side{width: 700px; flex-shrink: 0;}
}
.main-pic-wrap{
  display: flex; justify-content: center; align-items: center; width: 700px; height: 700px;
  ::v-deep img{width:auto; height: auto; max-width: 100%; max-height: 100%;}
}
.productIcon-list{
  margin: 10px 0; display: flex; flex-wrap: wrap;
  .el-image{margin-right: 4px;}
}
.icon-pic-wrap{
  display: flex; justify-content: center; align-items: center; width: 80px; height: 80px;
  ::v-deep img{width:auto; height: auto; max-width: 100%; max-height: 100%;}
}
.remark-item{text-align: left; line-height: 2; font-size: 20px;}
.el-image-viewer__wrapper ::v-deep .el-image-viewer__close{
  color: #fff;
  &:hover{color:#409EFF}
}
</style>